<script setup lang="ts">
import {ref,onMounted, reactive} from 'vue'
import employmentModel from '@/api/employment/employModel.ts'
import {getEmployment,getEmployById,deleteEmpById,saveEmployment,updateEmp} from '@/api/employment/employApi'
import { ElMessage } from 'element-plus'
import { add } from 'lodash';

const dialogFormVisible = ref(false)
const updateFormVisible = ref(false)
const formLabelWidth = '140px'

const handleEdit = (index: number, row: employmentModel) => {
  updateFormVisible.value = true
  getEmployById(row.eid).then(resp =>{
    const dataObj = resp.data.data;
    addForm.id = dataObj.eid
    addForm.name = dataObj.ename
    addForm.age = dataObj.eage
    addForm.address = dataObj.eaddr
    addForm.idcard = dataObj.idcard
    addForm.sex = dataObj.sex
  })
}
const handleDelete = (index: number, row: employmentModel) => {
    deleteEmpById(row.eid).then(resp=>{
        if(resp.data.code == 200) {
            ElMessage.success('删除成功');
            getAllList();
        } else {
            ElMessage.error(resp.data.message);
        }

    })
}


const addForm = reactive({
  id:null,
  name: '',
  sex: '',
  age:null,
  idcard:'',
  address:''
})
const tableData = reactive({
    records:[],
    total: 0,
    current: 1,
    size: 1,
    pages: 1
});
function getAllList() {
    getEmployment().then(resp => {
        // getEmployById('1').then(resp => {
        const respObj = resp.data;
        //分页数据以及数据处理
        if(respObj.code == 200 && respObj.data.records !=null) {
            tableData.records = respObj.data.records;
            tableData.current =respObj.data.current;
            tableData.size = respObj.data.size;
            tableData.pages= respObj.data.pages;
            tableData.total = respObj.data.total;
        }
        // else if(respObj.code == 200 ) {
        //     tableData.records =respObj.data;
            
        // }
    })
}
function saveForm() {
  dialogFormVisible.value = false;
  const employmentModel:employmentModel = reactive({});
  employmentModel.eid = addForm.id
  employmentModel.ename = addForm.name
  employmentModel.eaddr =addForm.address
  employmentModel.eage = addForm.age
  employmentModel.sex = addForm.sex
  employmentModel.idcard= addForm.idcard
  saveEmployment(employmentModel).then(data=>{
    if(data.data.code == 200) {
      ElMessage.success("插入成功")
      getAllList()
    } else {
      ElMessage.error(data.data.message)
    }
  })

}

function updateForm() {
  const employmentModel:employmentModel = reactive({});
  employmentModel.eid = addForm.id
  employmentModel.ename = addForm.name
  employmentModel.eaddr =addForm.address
  employmentModel.eage = addForm.age
  employmentModel.sex = addForm.sex
  employmentModel.idcard= addForm.idcard
  updateEmp(employmentModel).then(data=>{
    if(data.data.code == 200) {
      ElMessage.success("更新成功")
      updateFormVisible.value = false
      getAllList()
    } else {
      ElMessage.error(data.data.message)
    }
  })
}

onMounted(() => {
  getAllList();
})
</script>
 
<template>
  <el-row class="mb-4"><el-button type="primary" plain @click="dialogFormVisible = true">Add</el-button></el-row>
<el-table :data="tableData.records" style="width: 100%">
    <el-table-column label="id" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.eid }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column width="180" label="姓名">
        <template #default="scope">
            <div style="display: flex; align-items: center;">
                <span>{{ scope.row.ename }}</span>
            </div>
        </template>
    </el-table-column>
    <el-table-column label="性别" width="180">
      <template #default="scope">
        <div>{{ scope.row.sex }}</div>
      </template>
    </el-table-column>
    <el-table-column label="地址" width="180">
      <template #default="scope">
        <div>{{ scope.row.eaddr }}</div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >修改</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialogFormVisible" title="添加内容" width="80%">
    <el-form :model="addForm">
      <el-form-item label="名字" :label-width="formLabelWidth">
        <el-input v-model="addForm.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth">
        <el-select v-model="addForm.sex" placeholder="请选择性别">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>
      <el-form-item label="年龄" :label-width="formLabelWidth">
        <el-input v-model="addForm.age" autocomplete="off" />
      </el-form-item>
      <el-form-item label="身份证号" :label-width="formLabelWidth">
        <el-input v-model="addForm.idcard" autocomplete="off" />
      </el-form-item>
      <el-form-item label="地址" :label-width="formLabelWidth">
        <el-input v-model="addForm.address" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveForm()">提交</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="updateFormVisible" title="修改内容" width="80%">
    <el-form :model="addForm">
      <el-form-item label="id" :label-width="formLabelWidth">
        <el-input v-model="addForm.id" autocomplete="off" disabled/>
      </el-form-item>
      <el-form-item label="名字" :label-width="formLabelWidth">
        <el-input v-model="addForm.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth">
        <el-select v-model="addForm.sex" placeholder="请选择性别">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>
      <el-form-item label="年龄" :label-width="formLabelWidth">
        <el-input v-model="addForm.age" autocomplete="off" />
      </el-form-item>
      <el-form-item label="身份证号" :label-width="formLabelWidth">
        <el-input v-model="addForm.idcard" autocomplete="off" />
      </el-form-item>
      <el-form-item label="地址" :label-width="formLabelWidth">
        <el-input v-model="addForm.address" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="updateFormVisible = false">取消</el-button>
        <el-button type="primary" @click="updateForm()">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>